import React, { Component } from 'react';
import {
    View,
    StyleSheet,
    Image,
    TouchableOpacity,
    Text,
} from 'react-native';
const Dimensions = require('Dimensions')
const { width } = Dimensions.get('window');
let left = (width - (width * 0.1) * 4) / 5;
export default class TopMenu extends Component {
    render() {
        return (
            <View style={styles.topStyle}>
                <View style={styles.baiduIconStyle}>
                    <Image source={require('../../../Assets/images/baiduMap.png')} style={styles.icon} />
                </View>
                <View style={styles.topCenterStyle}>
                    <TouchableOpacity style={styles.familyTreeStyle}>
                        <Text>家庭树</Text>
                    </TouchableOpacity>
                    <TouchableOpacity style={styles.addressStyle}>
                        <Text> 通讯录</Text>
                    </TouchableOpacity>
                </View>
                <View style={styles.freshIconStyle} >
                    <Image source={require('../../../Assets/images/frech.png')} style={{ width: 30, height: 30 }} />
                </View>
            </View>
        )
    }
}

const styles = StyleSheet.create({

    topStyle: {
        flex: 0.1,
        width: width,
        alignItems: 'center',
        flexDirection: 'row',
        backgroundColor: '#1E90FF',
        marginTop: 10,
    },
    addressStyle: {
        borderColor: 'black',
        borderWidth: 1,
        height: '100%',
        width: '50%',
        justifyContent: 'center',
        alignItems: 'center',
    },
    familyTreeStyle: {
        borderColor: 'black',
        borderWidth: 1,
        height: '100%',
        width: '50%',
        justifyContent: 'center',
        alignItems: 'center',
    },
    baiduIconStyle: {
        flex: 0.3,
        height: 40,
        alignItems: 'center',
        justifyContent: 'center',
    },

    icon: {
        width: 30,
        height: 30,
        backgroundColor: 'white',
    },
    topCenterStyle: {
        flexDirection: 'row',
        backgroundColor: 'white',
        borderColor: 'black',
        flex: 0.4,
        height: 30,
        alignItems: 'center',
    },
    freshIconStyle: {
        flex: 0.3,
        justifyContent: 'center',
        alignItems: 'center',
    },

})